<template>
  <div>
    <el-table
      :v-loading="loading"
      :data="tableData"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="selection" type="selection"></el-table-column>
      <!-- 添加一个多选列 -->
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
      >
        <!-- 使用插槽来允许用户自定义列 -->
        <template v-slot="{ row }">
          <slot :name="column.prop" :row="row">{{ row[column.prop] }}</slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
const emit = defineEmits(['selectionChange']);
const { columns, tableData, selection } = defineProps({
  columns: {
    type: Array,
    default: () => [],
  },
  tableData: {
    type: Array,
    default: () => [],
  },
  selection: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
});
const handleSelectionChange = (val) => {
  emit('selectionChange', val);
};
onMounted(() => {});
</script>

<style lang="scss" scoped></style>
